<template>
    <div class="container1">
      <div class="left">
        <div class="top2_2">
          
        </div>
        <div class="bottom2_2">
          <p>支持向量机（SVM）是一类按监督学习方式对数据进行二元分类的广义线性分类器，
            其决策边界是对学习样本求解的最大边距超平面，可以将问题化为一个求解凸二次规
            划的问题。与逻辑回归和神经网络相比，支持向量机，在学习复杂的非线性方程时提
            供了一种更为清晰，更加强大的方式。
          
           </p>
        </div>
      </div>
      <div class="right">
        <div class="top">
          <el-form :model="form" label-width="60px">
            <el-row :gutter="20"> <!-- el-row 用于创建一个行容器，并设置间隔为20px -->
              <el-col :span="12"> <!-- el-col 用于创建列，span 属性表示该列占据的栅格数 -->
                <el-form-item label="统筹M">
                  <el-input v-model="form.input1"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="药品金">
                  <el-input v-model="form.input2"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
  
            <el-row :gutter="20"> <!-- el-row 用于创建一个行容器，并设置间隔为20px -->
              <el-col :span="12"> <!-- el-col 用于创建列，span 属性表示该列占据的栅格数 -->
                <el-form-item label="审批金">
                  <el-input v-model="form.input3"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="ALL_SUM">
                  <el-input v-model="form.input4"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
  
            <el-row :gutter="20"> <!-- el-row 用于创建一个行容器，并设置间隔为20px -->
              <el-col :span="12"> <!-- el-col 用于创建列，span 属性表示该列占据的栅格数 -->
                <el-form-item label="统筹A">
                  <el-input v-model="form.input5"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="药品A">
                  <el-input v-model="form.input6"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
  
            <el-row :gutter="20"> <!-- el-row 用于创建一个行容器，并设置间隔为20px -->
              <el-col :span="12"> <!-- el-col 用于创建列，span 属性表示该列占据的栅格数 -->
                <el-form-item label="药品费">
                  <el-input v-model="form.input7"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="就诊数">
                  <el-input v-model="form.input8"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
  
            <el-row :gutter="20"> <!-- el-row 用于创建一个行容器，并设置间隔为20px -->
              <el-col :span="12"> <!-- el-col 用于创建列，span 属性表示该列占据的栅格数 -->
                <el-form-item label="支付金">
                  <el-input v-model="form.input9"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="就诊天">
                  <el-input v-model="form.input10"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
  
          </el-form>
  
  
          <!--提交按钮-->
          <div style="display: flex; justify-content: center;">
            <el-button type="primary" @click="pred" round>预测</el-button>
          </div>
        </div>
        <div class="bottom">
          <p class="pp">点击此按钮，批量上传数据，进行批量分类</p>
          <el-upload
            class="upload-demo"
            action="http://127.0.0.1:5000/up_file/"
            :on-success="handleSuccess"
            :before-upload="beforeUpload"
          >
            <el-button size="small" type="primary">Click to Upload</el-button>
          </el-upload>
        </div>
      </div>
    </div>

    <!-------------------------------对话框1------------------------------------>
    <el-dialog v-model="dialogTableVisible" title="批量预测" width="700">
      <el-table :data="gridData">
        <el-table-column property="id" label="用户编号" width="500" />
        <el-table-column property="res" label="预测结果" width="200" />
      </el-table>
    </el-dialog>

    <!-------------------------------对话框1------------------------------------>

  </template>
  
  <script lang="ts">
  import { defineComponent, ref, toRefs} from 'vue';
  import { ElMessage, ElMessageBox } from 'element-plus'

  import axios from '@/axios';
  export default defineComponent({
    setup() {
      const form = ref({
          input1: '',
          input2: '',
          input3: '',
          input4: '',
          input5: '',     
          input6: '',
          input7: '',
          input8: '',
          input9: '',
          input10: '',
        });

      const dialogTableVisible = ref(false);
      const showDialog = () => {
        dialogTableVisible.value = true;
      };
      const gridData = ref([]);

      const beforeUpload = (file: any) => {
      // Perform validation before upload
      let isAllowed = true; // 根据需要设置条件

      if (!isAllowed) {
        alert("Error: The file is not allowed."); // 弹出警告
        return false;
      }
      return true;
    };

      const handleSuccess = (response: any, file: any) => {
      // Handle upload success
      if (response.code === 101) {
        axios.post('/pred')
          .then((response) => {
            // Assuming response.data is an array of objects representing the table data
            gridData.value = response.data; // Fill the gridData with the response data
            dialogTableVisible.value = true; // Show the dialog
          })
          .catch((error) => {
            console.error('Error fetching prediction data:', error);
          });
      }
    };

    const pred = () => {
      const inputs = [
        form.value.input1,
        form.value.input2,
        form.value.input3,
        form.value.input4,
        form.value.input5,
        form.value.input6,
        form.value.input7,
        form.value.input8,
        form.value.input9,
        form.value.input10
      ];
      axios.post('/pred_yi',{
        data:inputs
        }).then((response) => {
            // Assuming response.data is an array of objects representing the table data
            var res="正常"
            if(response.data.result!=0){
              res="欺诈行为"
            }
            ElMessageBox.confirm(
                '该数据的预测分类结果为'+response.data.result+',('+res+')',
                'Detail',
                {
                  confirmButtonText: 'OK',
                  cancelButtonText: 'Cancel',
                  type: 'success',
                }
              )
                .then(() => {
                  ElMessage({
                    type: 'success',
                    message: '已清空输入框数据，如需预测请继续输入',
                  })
                  form.value.input1 = '';
                  form.value.input2 = '';
                  form.value.input3 = '';
                  form.value.input4 = '';
                  form.value.input5 = '';
                  form.value.input6 = '';
                  form.value.input7 = '';
                  form.value.input8 = '';
                  form.value.input9 = '';
                  form.value.input10 = '';
                })
                .catch(() => {
                  ElMessage({
                    type: 'info',
                    message: '已清空你的数据，如需预测请继续输入',
                  })
                  form.value.input1 = '';
                  form.value.input2 = '';
                  form.value.input3 = '';
                  form.value.input4 = '';
                  form.value.input5 = '';
                  form.value.input6 = '';
                  form.value.input7 = '';
                  form.value.input8 = '';
                  form.value.input9 = '';
                  form.value.input10 = '';
                })
          })
          .catch((error) => {
            console.error('Error:', error);
          });
    };

    return {
        dialogTableVisible,
        showDialog,
        gridData,
        beforeUpload,
        handleSuccess,
        pred,
        form
      };
    },
    
  });


  </script>
  

  <style>
  /* 全局样式 */
  :root {
  --primary-color: #409eff;
  --secondary-color: #67c23a;
  --background-color: #f5f5f5;
  --text-color: #333;
  --border-color: #dcdfe6;
  }
  
  .pp{
  display: flex;
  justify-content: center;
  align-items: center;
  }
  
  /* 容器样式 */
  .container1 {
  display: flex;
  flex-direction: row;
  height: 590px;
  width: 100%;
  max-width: 1100px; /* 设置最大宽度 */
  margin: 50px auto; /* 居中显示 */
  background-color: var(--background-color);
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  }
  
  /* 左侧和右侧样式 */
  .left, .right {
  flex: 1;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  margin: 0 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  width: 500px;
  }
  
  /* 顶部和底部样式 */
  .top, .bottom {
  padding: 20px;
  border: 1px solid var(--border-color);
  margin-bottom: 20px; /* 根据需要调整空隙大小 */
  }
  .top2_2, .bottom2_2 {
    padding: 20px;
    border: 1px solid var(--border-color);
    margin-bottom: 20px; /* 根据需要调整空隙大小 */
    }
  /* 容器内部的顶部样式（增加） */
  .top2_2 {
    flex-grow: 1; /* 让.top根据可用空间增长 */
    min-height: 270px; /* 根据需要调整最小高度 */
    background-image: url('../../picku/svm.gif'); /* 替换为您的图片URL */
    background-size: cover; /* 背景图片覆盖整个元素 */
    background-position: center; /* 背景图片居中显示 */
    background-repeat: no-repeat; /* 不重复背景图片 */
    }
  
  .top {
  flex-grow: 1; /* 让.top根据可用空间增长 */
  min-height: 270px; /* 根据需要调整最小高度 */
  }
  
  /* 容器内部的底部样式（可选） */
  .bottom {
  min-height: 150px; /* 根据需要调整最小高度 */
  }
  .bottom2_2 {
    min-height: 150px; /* 根据需要调整最小高度 */
  }
  /* 表单样式 */
  .el-form {
  width: 100%;
  }
  
  .el-form-item {
  margin-bottom: 20px;
  }
  
  .el-input__inner {
  border-radius: 4px;
  padding: 10px 15px;
  }
  
  /* 上传样式 */
  .upload-demo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  }
  
  .el-button {
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 14px;
  background-color: var(--primary-color);
  color: white;
  border: none;
  transition: background-color 0.3s;
  }
  
  .el-button:hover {
  background-color: darken(var(--primary-color), 10%);
  }
  
  /* 响应式设计 */
  @media (max-width: 768px) {
  .container1 {
    flex-direction: column;
  }
  
  .left, .right {
    margin: 10px 0;
  }
  }
  </style>
  